<template>
  <div class="view">
    <div class="head">
      <p>29800</p>
      <p>可用先锋币</p>
    </div>
    <van-tabs :active="active" @change="change">
      <van-tab title="任务">
        <div class="list">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div>
              <p>{{ item.missionContent }}</p>
              <p>{{ item.missionRewards }}</p>
            </div>
            <div>去完成></div>
          </div>
        </div>
      </van-tab>
      <van-tab title="收支明细">
        <div class="list">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div>
              <p>赞赏医生</p>
              <p>2019-12-30 12:30:33</p>
            </div>
            <div>{{ item.missionReward }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// import { getCompletedListByUserId, task } from "@/apis/request";
import { etCompletedListByUserId, task } from "../../../apis/request.js";
export default {
  data() {
    return {
      active: 0,
      list: [],
      pageNo: 1,
      finished: false,
    };
  },
  methods: {
    change(e) {
      this.active = e.mp.detail.index;
      this.list = [];
      this.pageNo = 1;
      this.finished = false;
      this.getlist();
    },
    async getlist() {
      if (!this.finished) {
        if (this.active == 1) {
          const data = await getCompletedListByUserId({
            pageNo: this.pageNo++,
            pageSize: 10,
          });
        } else {
          const data = await task({
            pageNo: this.pageNo++,
            pageSize: 10,
          });
        }

        if (data.records.length == 0) {
          this.finished = true;
        }
        this.list.push(...data.records);
        wx.stopPullDownRefresh();
      }
    },
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    this.getlist();
  },
  onReachBottom() {
    this.getlist();
  },
  onPullDownRefresh() {
    this.list = [];
    this.finished = false;
    this.pageNo = 1;
    this.getlist();
  },
};
</script>
<style lang="scss" scoped>
.view {
  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#00cb74 0%, #25bba5 100%);
    height: 370rpx;
    flex-direction: column;
    p {
      color: #ffffff;
    }
    p:nth-child(1) {
      font-size: 60rpx;
      margin-bottom: 10rpx;
    }
    p:nth-child(2) {
      font-size: 26rpx;
    }
  }
  .list {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #f1efef;
    .item {
      border-bottom: 1rpx solid #e8e8e8;
      background-color: #ffffff;
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div:nth-child(1) {
        p:nth-child(1) {
          color: #020202;
          font-size: 28rpx;
        }
        p:nth-child(2) {
          color: #999999;
          font-size: 22rpx;
        }
      }
      div:nth-child(2) {
        font-size: 32rpx;
        color: #dd1d1a;
      }
      .subtract {
        color: #333333;
      }
    }
    .item:nth-last-child(1) {
      border: none;
    }
  }
}
</style>
